
 //顶部导航轮播图,msp1-1
 var swipertop = new Swiper(".msp1-1", {
  spaceBetween: 20,
  slidesPerView: 7,
  freeMode: true,
  watchSlidesProgress: true,
  autoplay: true,
  loop: true
});
//顶部大轮播图.msp1
var swipertop2 = new Swiper(".msp1", {
  spaceBetween: 10,
  thumbs: {
    swiper: swipertop,
  },
  autoplay: true,
  loop: true
});

$(function () {

  //我的追番

  //获取当前用户的追番数据
  axios({
    url:'collections',
    method:'get',
    params:{
      uid:nowuser.uid,
      page:1
    }
  }).then(function(res){
    $(res.data.data).each(function(index,ele){
/* 使用target="_blank" 后面需要加 rel="opener" 否则sessionStorage中的用户数据会丢失！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ */
      $('.likecontent').append(`
        <div class="likebox">
          <a href="./animedetail.html?vid=${ele.videoId}" target="_blank" rel="opener">
            <img src="${ele.videoImg}" alt="">
            <p>${ele.videoTitle}</p>
            <span>${ele.upTime}</span>
          </a>
        </div>
      `)
    })
    if($('.likebox span').html()!='已完结'){
      $('.likebox span').html('更新中')
    }
  })


  //近期更新

  /*判断周几函数*/
  function judgeday(h5) {
    let day
    day = $(h5).html().indexOf('一')
    if (day != -1) {
      return 1
    }
    day = $(h5).html().indexOf('二')
    if (day != -1) {
      return 2
    }
    day = $(h5).html().indexOf('三')
    if (day != -1) {
      return 3
    }
    day = $(h5).html().indexOf('四')
    if (day != -1) {
      return 4
    }
    day = $(h5).html().indexOf('五')
    if (day != -1) {
      return 5
    }
    day = $(h5).html().indexOf('六')
    if (day != -1) {
      return 6
    }
    day = $(h5).html().indexOf('日')
    if (day != -1) {
      return 7
    }
  }
  //根据周几渲染字体和背景
  function colorchange() {
    const daycolor = ["#E3EFCD", "#CDEFD7", "#CDEEEF", "#D1EAF2", "#DCE1F9", "#ECDDFB", "#FBDBF4"]
    const fontcolor = ["#71AD42", "#00AD34", "#00ABAD", "#0298C1", "#3459EE", "#9F50EE", "#EA3EC7"]
    $('.timebox').each(function (index, ele) {
      let day = judgeday($(ele).find("h5"))
      $(ele).css("border-top", `2px solid ${fontcolor[day - 1]}`)
      $(ele).css("background", `linear-gradient(to bottom,${daycolor[day - 1]},white)`)
      $(ele).find("h5").css("color", `${fontcolor[day - 1]}`)
      $(ele).find("h5").css("background-color", `${daycolor[day - 1]}`)
    })
  }
  //请求新番时间表下的数据
  let timeboxdata
  console.log(nowuser.token)
  $.ajax({
    url: 'static/selectlimit',
    type: 'get',
    async: false,
    dataType:'json',
    data: {
      page: 1,
      num: 30
    },
    success: function (res) {
      timeboxdata = res.data
      $(res.data).each(function (index, ele) {
        if (ele.upTime != '已完结') {
          $('.section4content').append(`
               <div class="timebox">
               <a href="animedetail.html?vid=${ele.videoId}" target="_blank" rel="opener">
                <img src="${ele.videoUrl}" alt="">
                <p>${ele.videoTitle}</p>
                <span>更新中</span>
                <h5>${ele.upTime}</h5>
                </a>
            </div>`)
        }
      })
      colorchange()
    }
  })

  //选择查看周几更新的番剧
  $('.section4top ul li').click(function () {
    $('.section4content').empty()
    let conut = 0
    let clickday = $(this).html()
    $(timeboxdata).each(function (index, ele) {
      if (clickday == ele.upTime) {
        if (ele.upTime != '已完结') {
          $('.section4content').append(`
               <div class="timebox">
               <a href="animedetail.html?vid=${ele.videoId}" target="_blank" rel="opener">
                <img src="${ele.videoUrl}" alt="">
                <p>${ele.videoTitle}</p>
                <span>更新中</span>
                <h5>${ele.upTime}</h5>
                </a>
            </div>`)
        }
      }
    })
    colorchange()
  })
  $('.section4top button').click(function () {
    $('.section4content').empty()
    $(timeboxdata).each(function (index, ele) {
      if (ele.upTime != '已完结') {
        $('.section4content').append(`
             <div class="timebox">
             <a href="animedetail.html?vid=${ele.videoId}" target="_blank" rel="opener">
              <img src="${ele.videoUrl}" alt="">
              <p>${ele.videoTitle}</p>
              <span>更新中</span>
              <h5>${ele.upTime}</h5>
              </a>
          </div>`)
      }
    })
  })
  //番剧热播榜

  /*番剧热播榜动态背景颜色函数*/
  function colorhot() {
    let color = ["#FEEEE6", "#FBF2E6", "#F8ECFD", "#EAEEFD", "#FDEEE7", "#FCEBEE"]
    let rankcolor = ["#FBC2A4", "#F3D1A3", "#E8BAF9", "#B1C1F9", "#FBC0A6", "#F7B7C1"]
    $('.hotanimebox').each(function (index, item) {
      let rank = $(item).find('.ranking').html()
      rank = rank % 6 + 1
      $(item).css({
        "background": `linear-gradient(to top,${color[rank - 1]},white)`
      })
      $(item).find('.ranking').css("color", `${rankcolor[rank - 1]}`)
    })
  }
  //请求番剧热播榜数据 按评分排序
  axios({
    url: "static/selectorderbyscore",
    method: "GET",
  }).then(function (res) {
    $(res.data.data).each(function (index, ele) {
      $('.section5content').append(`<div class="hotanimebox">
          <a href="animedetail.html?vid=${ele.videoId}" target="_blank" rel="opener">
          <img src="${ele.videoUrl}" alt="">
          <div class="ranking">${index + 1}</div>
          <p>${ele.videoTitle}</p>
          <span>${ele.videoIntro}</span>
          <div class="score">${ele.score}</div>
          </a>
        </div>`)
    })
    colorhot()
  })


  //预览推荐 推荐四个视频
  let recommenddata
  $.ajax({
    url: 'static/recommend',
    type: 'get',
    async: false,
    success: function (res) {
      recommenddata = res.data
    }
  })
  $('.section6content').append(`<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2 msp2">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <video controls autoplay muted loop src="${recommenddata[0].detailUrl}" /></video>
            </div>
            <div class="swiper-slide">
              <video controls autoplay muted loop src="${recommenddata[1].detailUrl}" /></video>
            </div>
            <div  class="swiper-slide">
              <video controls autoplay muted loop src="${recommenddata[2].detailUrl}" /></video>
            </div>
            <div class="swiper-slide">
              <video controls autoplay muted loop src="${recommenddata[3].detailUrl}" /></video>
            </div>
          </div>
        </div>
        <div class="introbox">
          <h1>${recommenddata[0].videoTitle}</h1>
          <div class="score">${recommenddata[0].score}</div>
          <span>☆☆☆☆☆<br></span>
          <span>1.2万人点评</span>
          <p>${recommenddata[0].videoIntro}
          </p>
          <div class="btn">
            <a href="animedetail.html?vid=${recommenddata[0].videoId}" target="_blank" rel="opener">
            <img src="./img/upload/播放.svg" alt="">
            </a>
          </div>
          <div class="btn">
            <img src="./img/upload/收藏.svg" alt="">
          </div>
          <div thumbsSlider="" class="swiper mySwiper msp2-2">
            <div class="swiper-wrapper">
              <div class="swiper-slide" data-id="0">
                <img src="${recommenddata[0].detailImg}" />
              </div>
              <div class="swiper-slide" data-id="1">
                <img src="${recommenddata[1].detailImg}" />
              </div>
              <div class="swiper-slide" data-id="2">
                <img src="${recommenddata[2].detailImg}" />
              </div>
              <div class="swiper-slide" data-id="3">
                <img src="${recommenddata[3].detailImg}" />
              </div>
            </div>
          </div>
        </div>`)
  //预览推荐轮播图导航
  var swiper = new Swiper(".msp2-2", {
    spaceBetween: 30,
    slidesPerView: 3,
    freeMode: true,
    watchSlidesProgress: true,
  });
  //预览推荐大轮播图
  var swiper2 = new Swiper(".msp2", {
    spaceBetween: 10,

    thumbs: {
      swiper: swiper,
    },
  });
  //点击切换介绍的内容
  $('.msp2-2 .swiper-slide').click(function () {
    let id = $(this).attr('data-id')
    $('.section6 video')[0].pause()
    $('.introbox h1').html(`${recommenddata[id].videoTitle}`)
    $('.introbox .score').html(`${recommenddata[id].score}`)
    $('.introbox>p').html(`${recommenddata[id].videoIntro}`)
    $('.introbox a:eq(0)').attr('href',`animedetail.html?vid=${recommenddata[id].videoId}`)
  })

  
  //猜你喜欢
  axios({
    url: 'static/guess',
    method: 'get',
  }).then(function (res) {
    $(res.data.data).each(function (index, ele) {
      $('.section7 .guess').append(`
          <div class="guessbox">
          <a href="./animedetail.html?vid=${ele.videoId}" target="_blank" rel="opener">
          <img src="${ele.videoUrl}" alt="">
          <p>${ele.videoTitle}</p>
          <span>${ele.videoIntro}</span>
          </a>
        </div>`)
    })
  })
  //热门榜
  axios({
    url: 'static/hotanime',
    method: 'get',
  }).then(function (res) {
    for(let i=0;i<4;i++){
      $('.section8 #part1 .parttop').append(`
        <div class="parttopbox">
            <a href="./animedetail.html?vid=${res.data.data[i].videoId}" target="_blank" rel="opener">
            <img src="${res.data.data[i].videoUrl}" alt="">
            <div class="ranking">${i+1}</div>
            <p>${res.data.data[i].videoTitle}</p>
            <span>${res.data.data[i].videoIntro}</span>
            <div class="score">${res.data.data[i].score}</div>
            </a>
          </div>`)
    }
    $(res.data.data).each(function (index, ele) {
      if(index>=4){
        $('.partcontent').append(`
            <div class="partbox">
            <a href="./animedetail.html?vid=${ele.videoId}" target="_blank" rel="opener">
            <img src="${ele.videoUrl}" alt="">
            <p>${ele.videoTitle}</p>
            <span>${ele.videoIntro}</span>
            </a>
          </div>`)
      }
      
    })
  })
})




